<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="出港结算明细" name="first">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="mxForm"
                    :model="mxForm"
                    :rules="mxrules"
                    label-width="auto"
                    class="flex"
                  >
                    <el-form-item label="运单号" prop="transportCodes">
                      <el-input
                        v-model="transportCodesString"
                        placeholder="请输入运输代码，使用逗号分隔"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select
                        v-model="mxForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.networkName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="时间范围" prop="mxtime">
                      <el-date-picker
                        v-model="mxForm.mxtime"
                        style="width: 708px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="mxchangetime"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button class="cx" @click="mxSearch">查询</el-button>
                      <el-button class="cz" @click="mxClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="异常数据" prop="abnormalDataId">
                      <el-select
                        v-model="mxForm.abnormalDataId"
                        placeholder="请选择异常数据"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in AbnormalList"
                          :key="item.id"
                          :label="item.abnormalData"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结算类型" prop="settleTypeId">
                      <el-select
                        v-model="mxForm.settleTypeId"
                        placeholder="请选择结算类型"
                        style="width: 286px"
                        @change="mxjs"
                      >
                        <el-option
                          v-for="item in SettleTypeList"
                          :key="item.id"
                          :label="item.settleType"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结算对象" prop="settleObject">
                      <el-input
                        v-model="mxForm.settleObject"
                        placeholder="请输入结算对象"
                        style="width: 304px"
                      />
                    </el-form-item>
                    <el-form-item label="父客户" prop="parentCustomer">
                      <el-input
                        v-model="mxForm.parentCustomer"
                        placeholder="请选择父客户"
                        style="width: 304px"
                      />
                    </el-form-item>
                    <el-form-item>
                      <div class="btn" @click="isShow">{{ title }}</div>
                    </el-form-item>
                    <el-collapse-transition>
                      <div
                        v-show="show3"
                        style="display: flex; flex-wrap: wrap"
                      >
                        <el-form-item label="网点对比" prop="networkCompare">
                          <el-select
                            v-model="mxForm.networkCompare"
                            placeholder="请选择网点对比"
                            style="width: 286px"
                          >
                            <el-option
                              v-for="(i, n) in networkCompareList"
                              :key="n"
                              :label="i.lable"
                              :value="i.value"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="所属业务员" prop="salesman">
                          <el-input
                            v-model="mxForm.salesman"
                            placeholder="请选择所属业务员"
                            style="width: 286px"
                          />
                        </el-form-item>
                        <el-form-item
                          label="客户结算周期"
                          prop="customerSettlementId"
                        >
                          <el-select
                            v-model="mxForm.customerSettlementId"
                            placeholder="请选择客户结算周期"
                            style="width: 286px"
                          >
                            <el-option
                              v-for="item in PayTypeList"
                              :key="item.id"
                              :label="item.payType"
                              :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="订单客户" prop="orderCustomer">
                          <el-input
                            v-model="mxForm.orderCustomer"
                            placeholder="请选择订单客户"
                            style="width: 286px"
                          />
                        </el-form-item>
                        <el-form-item label="锁定状态" prop="lockStatus">
                          <el-select
                            v-model="mxForm.lockStatus"
                            placeholder="请选择锁定状态"
                            style="width: 286px"
                          >
                            <el-option label="已锁定" value="已锁定" />
                            <el-option label="未锁定" value="未锁定" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="有效状态" prop="effectiveStatus">
                          <el-select
                            v-model="mxForm.effectiveStatus"
                            placeholder="请选择有效状态"
                            style="width: 286px"
                          >
                            <el-option label="有效" value="有效" />
                            <el-option label="无效" value="无效" />
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="收件网点"
                          prop="receivingNetworkId"
                        >
                          <el-select
                            v-model="mxForm.receivingNetworkId"
                            placeholder="请选择收件网点"
                            style="width: 286px"
                          >
                            <el-option
                              v-for="item in networkList"
                              :key="item.id"
                              :label="item.networkName"
                              :value="item.networkName"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="面单/订单网点"
                          prop="orderNetworkId"
                        >
                          <el-select
                            v-model="mxForm.orderNetworkId"
                            placeholder="请选择面单/订单网点"
                            style="width: 286px"
                          >
                            <el-option
                              v-for="item in networkList"
                              :key="item.id"
                              :label="item.networkName"
                              :value="item.networkName"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="付费标识" prop="payType">
                          <el-select
                            v-model="mxForm.payType"
                            placeholder="请选择付费标识"
                            style="width: 286px"
                          >
                            <el-option label="月结" value="月结" />
                            <el-option label="现付" value="现付" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="加盟方式" prop="contractAreaJoin">
                          <el-select
                            v-model="mxForm.contractAreaJoin"
                            placeholder="请选择加盟方式"
                            style="width: 286px"
                          >
                            <el-option label="直营" value="直营" />
                            <el-option label="非直营" value="非直营" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="到出港中心" prop="toCenter">
                          <el-select
                            v-model="mxForm.toCenter"
                            placeholder="请选择到出港中心"
                            style="width: 286px"
                          >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="出港中心" prop="orderCustomer">
                          <el-input
                            v-model="mxForm.orderCustomer"
                            placeholder="请选择出港中心"
                            style="width: 286px"
                          />
                        </el-form-item>
                        <el-form-item label="是否同城件" prop="isSameCity">
                          <el-select
                            v-model="mxForm.isSameCity"
                            placeholder="请选择"
                            style="width: 286px"
                          >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                          </el-select>
                        </el-form-item>
                        <el-form-item
                          label="目的省份"
                          prop="destinationProvince"
                        >
                          <el-select
                            v-model="mxForm.destinationProvince"
                            placeholder="请选择目的省份"
                            style="width: 286px"
                            @change="provinceChange"
                          >
                            <el-option
                              v-for="item in ProvinceList"
                              :key="item.id"
                              :label="item.province"
                              :value="{
                                pid: item.pid,
                                province: item.province,
                              }"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="目的城市" prop="destinationCity">
                          <el-select
                            v-model="mxForm.destinationCity"
                            placeholder="请选择目的城市"
                            style="width: 286px"
                          >
                            <el-option
                              v-for="item in cityList"
                              :key="item.id"
                              :label="item.city"
                              :value="item.city"
                            />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="结算最小重量" prop="minweight">
                          <el-input-number
                            v-model="mxForm.minweight"
                            controls-position="right"
                            :min="-999999"
                            :max="999999999"
                            placeholder="请输入最小重量"
                            style="width: 286px"
                          />
                        </el-form-item>
                        <el-form-item label="结算最大重量" prop="maxWeight">
                          <el-input-number
                            v-model="mxForm.maxWeight"
                            controls-position="right"
                            :min="-999999"
                            :max="999999999"
                            placeholder="请输入最大重量"
                            style="width: 286px"
                          />
                        </el-form-item>
                        <el-form-item
                          label="本网点集包"
                          prop="isFocusPackageNetwork"
                        >
                          <el-select
                            v-model="mxForm.isFocusPackageNetwork"
                            placeholder="请选择是或否"
                            style="width: 286px"
                          >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="人工补录" prop="isManualRecord">
                          <el-select
                            v-model="mxForm.isManualRecord"
                            placeholder="请选择是或否"
                            style="width: 286px"
                          >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-collapse-transition>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共<span>{{ mxTableData.length }}</span
                  >项
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <!-- <el-button type="primary">查询</el-button> -->
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="mxloading"
                  :data="mxTableData"
                  :th="mxth"
                  :n="3"
                />
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="mxForm.pageDate.pageNum"
                :page-size="mxForm.pageDate.pageSize"
                :total="mxtotal"
                @size-change="mxhandleSizeChange"
                @current-change="mxhandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="承包区中转费汇总" name="second">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="cbForm"
                    :model="cbForm"
                    :rules="mxrules"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="汇总维度" prop="collectType">
                      <el-select
                        v-model="cbForm.collectType"
                        placeholder="请选择汇总维度"
                        style="width: 286px"
                        @change="handleDimensionalityChange"
                      >
                        <el-option label="月汇总" value="2" />
                        <el-option label="日汇总" value="1" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-show="cbForm.collectType == '2'"
                        v-model="cbForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        style="width: 672px"
                      />

                      <el-date-picker
                        v-show="cbForm.collectType == '1'"
                        v-model="cbtime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 672px"
                        @change="cbdateChange"
                      />
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select
                        v-model="cbForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.networkName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="cbSearch">查询</el-button>
                      <el-button class="cz" @click="cbClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="承包区" prop="settleObject">
                      <el-input
                        v-model="cbForm.settleObject"
                        placeholder="请输入承包区"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="加盟方式" prop="contractAreaJoin">
                      <el-select
                        v-model="cbForm.contractAreaJoin"
                        placeholder="请选择加盟方式"
                        style="width: 286px"
                      >
                        <el-option label="直营" value="直营" />
                        <el-option label="非直营" value="非直营" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="承包区类型" prop="contractAreaType">
                      <el-select
                        v-model="cbForm.contractAreaType"
                        placeholder="请选择承包区类型"
                        style="width: 286px"
                      >
                        <el-option label="承包区" value="承包区" />
                        <el-option label="虚拟承包区" value="虚拟承包区" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共<span>{{ cbTableData.length }}</span
                  >项
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <!-- <el-button type="primary">查询</el-button> -->
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="cbqloading"
                  :data="cbTableData"
                  :th="cbth"
                  :n="3"
                />
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="cbForm.pageDate.pageNum"
                :page-size="cbForm.pageDate.pageSize"
                :total="cbtotal"
                @size-change="cbhandleSizeChange"
                @current-change="cbhandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="业务员中转费汇总" name="third">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="ywyForm"
                    :model="ywyForm"
                    :rules="mxrules"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="汇总维度" prop="collectType">
                      <el-select
                        v-model="ywyForm.collectType"
                        placeholder="请选择汇总维度"
                        style="width: 286px"
                        @change="handleDimensionalityChange"
                      >
                        <el-option label="月汇总" value="2" />
                        <el-option label="日汇总" value="1" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-show="ywyForm.collectType == '2'"
                        v-model="ywyForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        style="width: 672px"
                      />

                      <el-date-picker
                        v-show="ywyForm.collectType == '1'"
                        v-model="ywyTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 672px"
                        @change="ywydateChange"
                      />
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select
                        v-model="ywyForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.networkName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="ywySearch">查询</el-button>
                      <el-button class="cz" @click="ywyClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="业务员" prop="receivingPeople">
                      <el-input
                        v-model="ywyForm.receivingPeople"
                        placeholder="请输入业务员"
                        style="width: 286px"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共<span>{{ ywyTableData.length }}</span
                  >项
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <!-- <el-button type="primary">查询</el-button> -->
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="ywyloading"
                  :data="ywyTableData"
                  :th="ywyth"
                  :n="3"
                />
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="ywyForm.pageDate.pageNum"
                :page-size="ywyForm.pageDate.pageSize"
                :total="ywytotal"
                @size-change="ywyhandleSizeChange"
                @current-change="ywyhandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="客户运费汇总" name="fourth">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="khForm"
                    :model="khForm"
                    label-width="100px"
                    :rules="mxrules"
                    class="flex"
                  >
                    <el-form-item label="汇总维度" prop="collectType">
                      <el-select
                        v-model="khForm.collectType"
                        placeholder="请选择汇总维度"
                        style="width: 286px"
                        @change="handleDimensionalityChange"
                      >
                        <el-option label="月汇总" value="2" />
                        <el-option label="日汇总" value="1" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="时间范围">
                      <el-date-picker
                        v-show="khForm.collectType == '2'"
                        v-model="khForm.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        range-separator="至"
                        style="width: 672px"
                      />

                      <el-date-picker
                        v-show="khForm.collectType == '1'"
                        v-model="khTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 672px"
                        @change="khdateChange"
                      />
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select
                        v-model="khForm.networkNameId"
                        placeholder="请选择所属网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.networkName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="khSearch">查询</el-button>
                      <el-button class="cz" @click="khClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="客户名称" prop="settleObject">
                      <el-input
                        v-model="khForm.settleObject"
                        placeholder="请输入客户名称"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="父客户" prop="parentCustomer">
                      <el-input
                        v-model="khForm.parentCustomer"
                        placeholder="请输入父客户"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item
                      label="客户结算类型"
                      prop="customerSettlementId"
                    >
                      <el-select
                        v-model="khForm.customerSettlementId"
                        placeholder="请选择客户结算周期"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in PayTypeList"
                          :key="item.id"
                          :label="item.payType"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="出账状态" prop="intoAccountStatus">
                      <el-select
                        v-model="khForm.intoAccountStatus"
                        placeholder="请选择锁定状态"
                        style="width: 286px"
                      >
                        <el-option label="已出账" value="0" />
                        <el-option label="未出账" value="1" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共<span>{{ khTableData.length }}</span
                  >项
                </div>
              </el-col>
              <el-col :span="2">
                <div>
                  <!-- <el-button type="primary">查询</el-button> -->
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="khloading"
                  :data="khTableData"
                  :th="khth"
                  :n="2"
                />
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="khForm.pageDate.pageNum"
                :page-size="khForm.pageDate.pageSize"
                :total="khtotal"
                @size-change="khhandleSizeChange"
                @current-change="khhandleCurrentChange"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getOutletsList,
  getAbnormalList,
  getSettleTypeList,
  getPayTypeList,
  // getSettlementTableList,
  settlementSearch,
  getProvinceList,
  getCityId,
  transferMoneySearch,
  salesmanTransferSearch,
  customerFreightCollectSearch,
} from "@/api/dashboard";

export default {
  data() {
    return {
      mxrules: {
        networkNameId: [
          { required: true, message: "请输入网点名称", trigger: "blur" },
        ],
        mxtime: [{ required: true, message: "请选择日期", trigger: "change" }],
      },
      cbtime: [],
      ywyTime: [],
      khTime: [],
      title: "展开",
      // 业务员表头
      ywyth: [],
      // 承包区表头
      cbth: [],
      // 客户表头
      khth: [],
      // 明细表头
      mxth: [],
      // 明细表格加载状态
      mxloading: false,
      // 承包区表格加载状态
      cbqloading: false,
      // 业务员表格加载状态
      ywyloading: false,
      // 客户表格加载状态
      khloading: false,
      // 展开折叠
      show3: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        currentPage4: 4,
        desc: "",
      },
      // 日期
      Time: [],
      month: "",
      currentPage: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      value1: "",

      mxForm: {
        transportCodes: [],
        networkNameId: "",
        startTime: "",
        endTime: "",
        abnormalDatald: "",
        settleType: "",
        settleObject: "",
        parentCustomer: "",
        networkCompare: "",
        salesman: "",
        customerSettlementId: "",
        orderCustomer: "",
        lockStatus: "",
        effectiveStatus: "",
        receivingNetworkId: "",
        orderNetworkId: "",
        payType: "",
        contractAreaJoin: "",
        toCenter: "",
        leaveCentre: "",
        isSameCity: "",
        destinationProvince: "",
        destinationCity: "",
        minweight: 0,
        maxWeight: 0,
        isFocusPackageNetwork: "",
        isManualRecord: "",
        mxtime: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      cbForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        settleObject: "",
        contractAreaJoin: "",
        contractAreaType: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      ywyForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        receivingPeople: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      khForm: {
        collectType: "1",
        startTime: "",
        endTime: "",
        month: "",
        networkNameId: "",
        settleObject: "",
        parentCustomer: "",
        customerSettlementId: "",
        intoAccountStatus: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      show: 1,
      mxTableData: [],
      cbTableData: [],
      ywyTableData: [],
      khTableData: [],
      total: 0,
      mxtotal: 0,
      mxpages: {
        pageNum: 1,
        pageSize: 10,
      },

      cbtotal: 0,
      ywytotal: 0,
      khtotal: 0,
      cbpages: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      activeName: "first",
      // 网点列表
      networkList: [],
      // 异常数据
      AbnormalList: [],

      // 结算类型列表
      SettleTypeList: [],

      // 付款方式列表
      PayTypeList: [],

      // 省
      ProvinceList: [],

      // 市
      cityList: [],
      networkCompareList: [
        {
          lable: "所属网点产面单/订单网点",
          value: "1",
        },
        {
          lable: "所属网点收件网点",
          value: "2",
        },
        {
          lable: "收件网点面单/订单网点",
          value: "3",
        },
        {
          lable: "收件网点为空",
          value: "4",
        },
        {
          lable: "面单/订单网点为空",
          value: "5",
        },
      ],
    };
  },
  computed: {
    transportCodesString: {
      get() {
        return this.mxForm.transportCodes.join(",");
      },
      set(value) {
        this.mxForm.transportCodes =
          value !== "" ? value.split(",").map((item) => item.trim()) : [];
      },
    },
  },
  created() {
    this.getOutLet();
    this.getAbnormal();
    this.getSettleType();
    this.getPayType();
    // this.getMxTab()
    this.getProvince();
  },
  methods: {
    isShow() {
      if (this.show3) {
        this.show3 = false;
        this.title = "展开";
        return;
      }
      this.show3 = true;
      this.title = "收起";
    },
    // 明细结算
    mxjs(value) {
      this.mxForm.pageDate.pageNum = 1;
      this.mxForm.pageDate.pageSize = 1;
    },
    // 获取明细时间
    mxchangetime(value) {
      if (value != null) {
        this.mxForm.startTime = value[0];
        this.mxForm.endTime = value[1];
      } else {
        this.mxForm.startTime = "";
        this.mxForm.endTime = "";
      }
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data;
        }
      });
    },
    // 获取异常数据列表
    getAbnormal() {
      getAbnormalList().then((res) => {
        if (res.code === 200) {
          this.AbnormalList = res.data;
        }
      });
    },
    // 结算类型列表
    getSettleType() {
      getSettleTypeList().then((res) => {
        if (res.code === 200) {
          this.SettleTypeList = res.data;
        }
      });
    },
    // 付款方式列表
    getPayType() {
      getPayTypeList().then((res) => {
        if (res.code === 200) {
          this.PayTypeList = res.data;
        }
      });
    },
    // 日期转换
    dateChange(value) {
      if (value != null) {
        this.mxForm.startTime = value[0];
        this.mxForm.endTime = value[1];
      } else {
        this.mxForm.startTime = "";
        this.mxForm.endTime = "";
      }
    },
    // 获取省
    getProvince() {
      getProvinceList().then((res) => {
        if (res.code === 200) {
          this.ProvinceList = res.data;
        }
      });
    },
    // 获取省的id
    provinceChange(value) {
      console.log(value);
      this.mxForm.destinationProvince = value.province;
      this.getCity(value.pid);
    },
    getCity(pid) {
      getCityId(pid).then((res) => {
        if (res.code === 200) {
          this.cityList = res.data;
        }
      });
    },
    // 承包日期根据月.日切换时间选择
    handleDimensionalityChange() {
      this.khTime = [];
      this.cbtime = [];
      this.ywyTime = [];
      this.cbForm.month = "";
      this.ywyForm.month = "";
      this.khForm.month = "";
      this.cbForm.startTime = "";
      this.cbForm.endTime = "";
      this.ywyForm.startTime = "";
      this.ywyForm.endTime = "";
      this.khForm.startTime = "";
      this.khForm.endTime = "";
    },
    // 承包日期转换
    cbdateChange(value) {
      if (value != null) {
        this.cbForm.startTime = value[0];
        this.cbForm.endTime = value[1];
      } else {
        this.cbForm.startTime = "";
        this.cbForm.endTime = "";
      }
    },
    // 业务员日期转换
    ywydateChange(value) {
      if (value != null) {
        this.ywyForm.startTime = value[0];
        this.ywyForm.endTime = value[1];
      } else {
        this.ywyForm.startTime = "";
        this.ywyForm.endTime = "";
      }
    },
    // 客户日期转换
    khdateChange(value) {
      if (value !== null) {
        this.khForm.startTime = value[0];
        this.khForm.endTime = value[1];
      } else {
        this.khForm.startTime = "";
        this.khForm.endTime = "";
      }
    },
    // 明细查询
    mxSearch() {
      this.$refs.mxForm.validate((valid) => {
        if (valid) {
          this.mxloading = true;
          settlementSearch(this.mxForm).then((res) => {
            this.mxloading = false;
            if (res.code === 200) {
              this.mxth = res.data.fields;
              this.mxTableData = res.data.list.data;
              this.mxtotal = res.data.list.total;
            } else {
              this.mxTableData = [];
              this.mxtotal = 0;
            }
          });
        }
      });
    },
    cbSearch() {
      this.$refs.cbForm.validate((valid) => {
        if (valid) {
          if (this.cbForm.startTime === "" && this.cbForm.month === "") {
            this.$message("请选择时间");
            return;
          }
          this.cbqloading = true;
          transferMoneySearch(this.cbForm).then((res) => {
            this.cbqloading = false;
            if (res.code === 200) {
              this.cbTableData = res.data.list.data;
              this.cbtotal = res.data.list.total;
              this.cbth = res.data.fields;
            } else {
              this.cbTableData = [];
              this.cbtotal = 0;
            }
          });
        } else {
          return false;
        }
      });
    },
    ywySearch() {
      this.$refs.ywyForm.validate((valid) => {
        if (valid) {
          if (this.ywyForm.startTime === "" && this.ywyForm.month === "") {
            this.$message("请选择时间");
            return;
          }
          this.ywyloading = true;
          salesmanTransferSearch(this.ywyForm).then((res) => {
            this.ywyloading = false;
            if (res.code === 200) {
              this.ywyTableData = res.data.list.data;
              this.ywytotal = res.data.list.total;
              this.ywyth = res.data.fields;
            } else {
              this.ywyTableData = [];
              this.ywytotal = 0;
            }
          });
        } else {
          return false;
        }
      });
    },
    // 客户表格
    khSearch() {
      this.$refs.khForm.validate((valid) => {
        if (valid) {
          if (this.khForm.startTime === "" && this.khForm.month === "") {
            this.$message("请选择时间");
            return;
          }
          this.khloading = true;
          customerFreightCollectSearch(this.khForm).then((res) => {
            this.khloading = false;
            if (res.code === 200) {
              this.khth = res.data.fields;
              this.khTableData = res.data.list.data;
              // console.log(this.khTableData)
              this.khtotal = res.data.list.total;
            } else {
              this.khTableData = [];
              this.khtotal = 0;
            }
          });
        }
      });
    },
    mxClear() {
      this.$refs.mxForm.resetFields();
      this.mxForm.startTime = "";
      this.mxForm.endTime = "";
      this.mxForm.mxtime = "";
    },
    cbClear() {
      this.$refs.cbForm.resetFields();

      // this.cbForm.collectType = '1'
      this.cbtime = [];
      this.cbForm.month = "";
      this.cbForm.startTime = "";
      this.cbForm.endTime = "";
    },
    ywyClear() {
      this.$refs.ywyForm.resetFields();
      this.ywyTime = [];
      this.ywyForm.startTime = "";
      this.ywyForm.endTime = "";
      this.ywyForm.month = "";
    },
    khClear() {
      this.$refs.khForm.resetFields();

      this.khForm.startTime = "";
      this.khForm.endTime = "";
      this.khTime = "";
      this.khForm.month = "";
    },
    // 切换
    handleClick(tab, event) {
      this.khClear();
      if (tab.name === "second") {
        this.cbClear();
      } else if (tab.name === "third") {
        this.ywyClear();
      } else if (tab.name === "fourth") {
        this.khClear();
      }
    },
    mxhandleSizeChange(val) {
      this.mxForm.pageDate.pageSize = val;
      this.mxForm.pageDate.pageNum = 1;
      this.mxSearch();
    },
    mxhandleCurrentChange(val) {
      this.mxForm.pageDate.pageNum = val;
      this.mxSearch();
    },
    cbhandleSizeChange(val) {
      this.cbForm.pageDate.pageSize = val;
      this.cbForm.pageDate.pageNum = 1;
      this.cbSearch();
    },
    cbhandleCurrentChange(val) {
      this.cbForm.pageDate.pageNum = val;
      this.cbSearch();
    },
    ywyhandleSizeChange(val) {
      this.ywyForm.pageDate.pageSize = val;
      this.ywyForm.pageDate.pageNum = 1;
      this.ywySearch();
    },
    ywyhandleCurrentChange(val) {
      this.ywyForm.pageDate.pageNum = val;
      this.ywySearch();
    },
    khhandleSizeChange(val) {
      this.khForm.pageDate.pageSize = val;
      this.khForm.pageDate.pageNum = 1;
      this.khSearch();
    },
    khhandleCurrentChange(val) {
      this.khForm.pageDate.pageNum = val;
      this.khSearch();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  background: #ffffff;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.page > span {
  color: #2087d0;
}
.btn {
  width: 72px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-align: center;
  color: #2087d0;
  cursor: pointer;
  user-select: none;
}
</style>
